<script setup>
import {computed, ref} from "vue";
import { ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import {http} from "@/api";
import UploadImage from "@/components/UploadImage.vue";
const apiKey = 'condition'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const copyId = route.query.copyId
const categoryList = ref([])
http.category.list().then(res => {
  categoryList.value = res.data
})
const tagList = ref([])
const changeCategory = (val) => {
  http.tag.list({category_id: val}).then(res => {
    tagList.value = res.data
  })
}
const formData = ref({
  id: undefined,
  filter_flag: 0,
  category_id: null,
  tag_id: '',
  status: 1,
  sort: 0,
  field_key: '',
  field_name: '',
  field_type: '',
  image_num: 4,
  option: [
    {
      label: '',
      value: '',
    }
  ]
})
const rules = ref({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  category_id: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  tag_id: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  field_key: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  field_name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
})

const formRef =  ref(null)
if (id) {
  // 获取详情
  http[apiKey].read(id).then(res => {
    formData.value = {
      ...res.data,
      option: JSON.parse(res.data.option)
    }
    changeCategory(res.data.category_id)
  })
}
if(copyId) {
  // 获取详情
  http[apiKey].read(copyId).then(res => {
    formData.value = {
      id: undefined,
      ...res.data,
      option: JSON.parse(res.data.option)
    }
    changeCategory(res.data.category_id)
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[apiKey].update({
          ...formData.value,
          id,
          option: JSON.stringify(formData.value.option)
        }).then(res => {
          ElMessage.success('编辑成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[apiKey].create({
          ...formData.value,
          option: JSON.stringify(formData.value.option)
        }).then(res => {
          ElMessage.success('新增成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
const addOption = () => {
  formData.value.option.push({
    label: '',
    value: ''
  })
}
const deleteOption = (index) => {
  formData.value.option.splice(index,1)
}
</script>

<template>
  <PageMain :title="id ? '编辑' :'新增'">
    <div class="form-content f-c ">
          <div class="form-box form-box2">
            <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" >
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="是否允许条件筛选">
                    <el-switch :active-value="1" :inactive-value="0" v-model="formData.filter_flag"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所属游戏" prop="category_id">
                    <el-select v-model="formData.category_id" clearable @change="changeCategory">
                      <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="上级标签" prop="tag_id">
                    <el-tree-select v-model="formData.tag_id"  default-expand-all :data="tagList" :props="{ label: 'name', value: 'id'}" placeholder="请选择">
                    </el-tree-select>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item
                      label="标题Key"
                      prop="field_key">
                    <el-input clearable v-model="formData.field_key"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                      label="标题"
                      prop="field_name">
                    <el-input clearable v-model="formData.field_name"></el-input>
                  </el-form-item>
                </el-col>
                <!--           选项类型 field_type -->
                <el-col :span="24">
                  <el-form-item
                      label="选项类型"
                      prop="field_type">
                    <el-select v-model="formData.field_type" clearable>
                      <el-option label="文本" value="text"></el-option>
                      <el-option label="数字区间" value="number"></el-option>
                      <el-option label="单选" value="radio"></el-option>
                      <el-option label="多选" value="checkbox"></el-option>
                      <el-option label="图片" value="image"></el-option>
<!--                      <el-option label="图片+文字" value="image_text"></el-option>-->
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="formData.field_type.includes('image')">
                  <el-form-item
                      label="图片列数"
                      prop="image_num">
                    <el-input type="number" v-model="formData.image_num" :max="4"></el-input>
                  </el-form-item>
                </el-col>

                <el-table :data="formData.option" v-if="formData.field_type === 'radio' || formData.field_type === 'checkbox' ">
                  <el-table-column label="选项值">
                    <template #default="scope">
                      <el-input v-model="scope.row.value"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="选项名称">
                    <template #default="scope">
                      <el-input v-model="scope.row.label"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="text" @click="addOption">添加</el-button>
                      <el-button v-if="scope.$index > 0" type="text" @click="deleteOption(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table :data="formData.option" v-if="formData.field_type === 'image'">
                  <el-table-column label="图片">
                    <template #default="scope">
                      <upload-image v-model:image="scope.row.value" :size="1"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="图片名称">
                    <template #default="scope">
                      <el-input v-model="scope.row.label"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="text" @click="addOption">添加</el-button>
                      <el-button v-if="scope.$index > 0" type="text" @click="deleteOption(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-form>
          </div>
      <div class="form-button f-s">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </PageMain>
</template>
